<template>
    <div class="apply">
        <div class="apply-top">
            <div class="territory">
                <div class="territory-title">
                    <titleView text="所属领域" :font-size="24" :bg-image="require('../../../assets/image/组 21.png')">
                    </titleView>
                </div>
                <div class="territory-content">
                    <div class="box" v-for="(item, index) in territoryList" :key="item.name" @click="goapplyNum">
                        <div class="num" :style="index == 0 ? { color: '#758eff' } : ''">{{ item.num }}<span
                                :style="index == 0 ? { color: '#758eff' } : ''">个</span></div>
                        <div class="chinese">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <div class="model">
                <div class="model-title">
                    <titleView text="建设模式" :font-size="24" :bg-image="require('../../../assets/image/组 22.png')">
                    </titleView>
                </div>
                <modelEcharts></modelEcharts>
            </div>
            <div class="trend">
                <div class="trend-title">
                    <div class="model-title">
                        <titleView text="建设趋势" :font-size="24" :bg-image="require('../../../assets/image/组 24.png')">
                        </titleView>
                    </div>
                    <trendEcharts></trendEcharts>
                </div>
            </div>
        </div>
        <div class="apply-centre">
            <div class="applycentreOne">
                <div class="applycentreOne-title">
                    <titleView text="网络环境" :font-size="24" :bg-image="require('../../../assets/image/组 26.png')">
                    </titleView>
                </div>
                <div class="applycentreOne-content">
                    <div class="record" v-for=" (item, index) in networkLIstanbul" :key="item.name"
                        @click="index <= 1 && popshow(item)">
                        <div>{{ item.name }}</div>
                        <div :style="index <= 1 ? { color: '#3F8CFF' } : ''">{{ item.num }}<span>个</span></div>
                    </div>
                </div>
            </div>
            <div class="applycentreTwo">
                <div class="applycentreOne-title">
                    <titleView text="应用类型" :font-size="24" :bg-image="require('../../../assets/image/组 27.png')">
                    </titleView>
                </div>
                <div class="applycentreOne-content">
                    <div class="record" v-for=" (item, index) in applyLIstanbul" :key="item.name"
                        @click="index <= 1 && popshow(item)">
                        <div>{{ item.name }}</div>
                        <div :style="index <= 1 ? { color: '#3F8CFF' } : ''">{{ item.num }}<span>个</span></div>
                    </div>
                </div>
            </div>
            <div class="applycentreThree">
                <div class="type">
                    <div class="applycentreOne-title">
                        <titleView text="用户类型" :font-size="24" :bg-image="require('../../../assets/image/组 28.png')">
                        </titleView>
                    </div>
                    <div class="typeuser" v-for="item in typeList" :key="item.name">
                        <div class="typeusernum">{{ item.num }}个</div>
                        <div class="typeusername">{{ item.name }}</div>
                    </div>
                </div>
                <div class="scope">
                    <div class="applycentreOne-title">
                        <titleView text="用户范围" :font-size="24" :bg-image="require('../../../assets/image/组 28.png')">
                        </titleView>
                    </div>
                    <div class="scopecontent">
                        <div class="scopecontentinfo" v-for="item in scopeLIst" :key="item.id">
                            <div class="scopecontentnum">{{ item.name }}</div>
                            <div>--</div>
                        </div>
                    </div>
                </div>
                <div class="notitle">
                    <div class="notitlecontent">
                        <div class="contentinfo" v-for="item in List" :key="item.name">
                            <div class="shang">{{ item.name }}</div>
                            <div class="xia">{{ item.num }}<span style="font-size: 18px;color: #2B4054;">{{ item.value == 1
                                ? '个'
                                : '%' }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="apply-bottom">
            <div class="applybottomOne">
                <div class="applycentreOne-title">
                    <titleView text="发布终端" :font-size="24" :bg-image="require('../../../assets/image/组 30.png')">
                    </titleView>
                </div>
                <div class="applybottomOne-content">
                    <div class="bottomBox" v-for="(item, index) in terminalLIst" :key="item.name"
                        @click="index <= 1 && popshow(item)">
                        <div class="boxone">{{ item.name }}</div>
                        <div class="obxtwo" :style="index <= 1 ? { color: '#3f8cff' } : ''">{{ item.num + '个' }}</div>
                    </div>
                </div>
            </div>
            <div class="applybottomTwo">
                <div class="applycentreOne-title">
                    <titleView text="部门应用数排行" :font-size="24" :bg-image="require('../../../assets/image/组 32.png')">
                    </titleView>
                </div>
                <sourceEachart id="topEachar" each-color="#A192FF" :key="Math.random(100) * 100" :data="data" height="246.0px"
                    width="100%"></sourceEachart>
            </div>
            <div class="applybottomThree">
                <div class="applycentreOne-title">
                    <titleView text="应用注册用户数排行" :font-size="24" :bg-image="require('../../../assets/image/组 32.png')">
                    </titleView>
                </div>
                <sourceEachart id="topEachars" each-color="#15C0E6" :key="Math.random(100) * 100"  height="246.0px"
                    width="100%"></sourceEachart>
            </div>
        </div>
        <!-- 弹框 -->
        <Dialog :visible.sync="show" :title="title">
            <el-table class="customer-table" :data="dataList" style="width: 100%" stripe="true" :header-cell-style="{color:'#000',background:'#f6f6f6',fontSize:'22px'}">
                <el-table-column prop="date" label="序号" width="80" type="index" align="center">
                </el-table-column>
                <el-table-column prop="name" label="应用名称" align="center">
                </el-table-column>
                <el-table-column prop="unit" label="建设单位" align="center">
                </el-table-column>
                <el-table-column prop="people" label="联系人" align="center">
                </el-table-column>
            </el-table>


        </Dialog>
    </div>
</template>

<script>
import titleView from '@/components/title/index.vue'
import modelEcharts from '@/views/dashboard/apply/component/modelEcharts.vue'
import trendEcharts from '@/views/dashboard/apply/component/trendEcharts.vue'
import sourceEachart from '@/components/sourceEachart/index.vue'
import Dialog from '@/components/dialog/index.vue'
import { color } from 'echarts'
export default {
    components: { titleView, modelEcharts, trendEcharts, sourceEachart, Dialog },
    data() {
        return {
            //所属领域
            data:['市市监居','市规划居','市教委','市交通局','市城管局','市通管局','市审计局','市卫建委','市委办公厅','市委监办'],
            territoryList: [
                { name: '应用总数', num: 2131 },
                { name: '党建统领的整体智治', num: 2131 },
                { name: '经济调节', num: 2131 },
                { name: '市场监管', num: 2131 },
                { name: '应急管理', num: 2131 },
                { name: '生态保护', num: 2131 },
                { name: '公共服务', num: 2131 },
                { name: '基层智治', num: 2131 }
            ],
            //网络环境
            networkLIstanbul: [
                { name: '政府外网', num: 123 },
                { name: '互联网', num: 123 },
                { name: '业务专网', num: 123 },
                { name: '单机', num: 123 },
                { name: '其他', num: 123 },
            ],
            title: "",
            //应用类型
            applyLIstanbul: [
                { name: '办公类', num: 2332 },
                { name: '业务应用类', num: 1423 },
                { name: '门户网站类', num: 123 },
                { name: '宣传微博/微信公众号', num: 223 },
                { name: '其他', num: 1323 },
            ],
            // 用户类型
            typeList: [
                { name: '政府机关单位用户', num: 2332 },
                { name: '企业用户', num: 1423 },
                { name: '群众用户', num: 123 },
            ],
            //用户范围
            scopeLIst: [
                { name: '市级-区(县)-乡镇(街道)-村(社区)-网格', id: 1 },
                { name: '市级-区(县)-乡镇(街道)-村(社区)', id: 2 },
                { name: '市级-区(县)-乡镇(街道)-网格', id: 3 },
                { name: '市级-区(县)', id: 4 },
                { name: '区(县)-乡镇(街道)-村(社区)-网格', id: 5 },
                { name: '区(县)-乡镇(街道)', id: 6 },
            ],
            //没有标题列表
            List: [
                { name: '横向协同应用', id: 1, value: 1, num: 123 },
                { name: '横向协率', id: 1, value: 2, num: 26.1 },
                { name: '纵向贯通应用', id: 1, value: 1, num: 123 },
                { name: '横向贯通率', id: 1, value: 2, num: 12.3 },
            ],
            //发布终端
            terminalLIst: [
                { name: '渝快办', id: 1, value: 1, num: 123 },
                { name: '渝快政', id: 1, value: 2, num: 26.1 },
                { name: '自建App', id: 1, value: 1, num: 123 },
                { name: '自建微信小程序', id: 1, value: 2, num: 12.3 },
                { name: '自建支付宝小程序', id: 1, value: 2, num: 12.3 },
                { name: '网页', id: 1, value: 2, num: 12.3 },
                { name: '微博', id: 1, value: 2, num: 12.3 },
                { name: '其他', id: 1, value: 2, num: 12.3 },
            ],
            show: false,
            // 弹窗数据
            dataList:[
                {name:'自行车',unit:'公安',people:'小李'},
                {name:'自行车',unit:'公安',people:'小李'},
                {name:'自行车',unit:'公安',people:'小李'},
                {name:'自行车',unit:'公安',people:'小李'},
            ]
        }
    },
    methods: {
        goapplyNum() {
            this.$router.push('applyNum')
        },
        popshow(item) {
            this.show = true
            this.title = item.name
        }
    }
}
</script>

<style lang="scss" scoped>
.apply {
    width: 1920px;
    height: 1080px;
    background: #F2F8FF;
    border-radius: 0px 0px 0px 0px;
}

.apply-top {
    display: flex;
    margin-top: 30px;
    width: 100%;
    height: 300px;
}

.apply-centre {
    display: flex;
    margin-top: 30px;
    width: 100%;
    height: 300px;
}

.applycentreOne {
    width: 443px;
    height: 300px;
    margin-left: 30px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.applycentreOne-content {
    width: 401px;
    height: 190px;
    margin-left: 21px;
    margin-top: 21px;
    background: linear-gradient(180deg, rgba(222, 246, 251, 0.6) 0%, rgba(222, 246, 251, 0) 100%);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    overflow: hidden;
}

.applycentreTwo {
    width: 443px;
    height: 300px;
    margin-left: 30px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.applycentreThree {
    display: flex;
    width: 915px;
    margin-left: 30px;
    height: 300px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.type {
    width: 200px;
    height: 300px;
}

.typeuser {
    width: 200px;
    height: 60px;
    text-align: center;
    margin-left: 22px;
    margin-top: 21px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(229, 239, 255, 0.6) 0%, rgba(229, 239, 255, 0) 100%);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
}

.typeusernum {
    height: 24px;
    font-size: 18px;
    margin-top: 10px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #2B4054;
}

.typeusername {
    height: 24px;
    font-size: 18px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #2B4054;
}

.scope {
    width: 390px;
    height: 300px;
    margin-left: 25px;
}

.scopecontent {
    width: 390px;
    height: 200px;
    margin: 21px 0 0 21px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(161, 146, 255, 0.15) 0%, rgba(222, 246, 251, 0) 100%);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
}

.scopecontentinfo {
    display: flex;
    justify-content: space-between;
    padding: 0 17px 0 17px;
    font-size: 18px;
    margin-top: 17px;
    margin-top: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #2B4054;
}

.notitle {
    width: 238px;
    height: 300px;
    margin-left: 45px;
    overflow: hidden;
}

.notitlecontent {
    overflow: hidden;
}

.contentinfo {
    display: flex;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 0 17px 0 17px;
    justify-content: space-between;
}

.shang {}

.notitlecontent {
    width: 238px;
    margin-top: 72px;
    height: 200px;
    background: linear-gradient(180deg, rgba(229, 239, 255, 0.6) 0%, rgba(229, 239, 255, 0) 100%);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
}

.record {
    display: flex;
    justify-content: space-between;
    padding: 0 17px 0 17px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 17px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #2B4054;
}

.applybottomOne-content {
    width: 401px;
    height: 190px;
    margin-left: 21px;
    margin-top: 21px;
    overflow: hidden;
    overflow-y: scroll;
    background: linear-gradient(180deg, rgba(222, 246, 251, 0.6) 0%, rgba(222, 246, 251, 0) 100%);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
}

.bottomBox {
    display: flex;
    justify-content: space-between;
    padding: 0 17px 0 17px;
    font-size: 18px;
    margin-top: 17px;
    cursor: pointer;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #2B4054;
}

.apply-bottom {
    display: flex;
    margin-top: 30px;
    width: 100%;
    height: 300px;
}

.applybottomOne {
    width: 443px;
    height: 300px;
    margin-left: 30px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.applybottomTwo {
    width: 915px;
    height: 300px;
    margin-left: 30px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.applybottomThree {
    width: 443px;
    height: 300px;
    margin-left: 30px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.territory {
    width: 915px;
    height: 300px;
    margin-left: 30px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.model {
    width: 443px;
    height: 300px;
    margin-left: 30px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.trend {
    width: 443px;
    height: 300px;
    margin-left: 30px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.territory-title {
    margin: 23px 0 0 23px;
}

.model-title {
    margin: 23px 0 0 23px;
}

.trend-title,
.applycentreOne-title {
    margin: 23px 0 0 23px;
}

.territory-content {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% -37px);
    height: 250px;
    margin-left: 37px;
}

.box {
    width: 200px;
    height: 100px;
    margin-right: 16px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    margin-top: 17px;
    background: rgba(229, 239, 255, 0.3);
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.num {
    width: 100%;
    height: 40px;
    font-size: 30px;
    margin-top: 20px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
}

span {
    font-size: 18px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
}

.chinese {
    width: 100%;
    height: 24px;
    font-size: 18px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #2B4054;

}
.customer-table th{
    border:none;
  }
</style>